//@ts-nocheck
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import * as echarts from 'echarts/lib/echarts'

import React, { useEffect, useImperativeHandle } from 'react'
import { BarGradientColor2 } from '../colorConfig'
import { ChartsInstance } from '../interface'
import './index.less'

let echartsInstance: any

interface IProps {
  /* 单位 */
  chartId: string
  unit?: string
  data: Array<{ title: string; placeholder: number; data: Array<{ title: string; value: number }> }>
  chartRef?: React.MutableRefObject<ChartsInstance>
}

const WaterFallChart: React.FC<IProps> = ({ data, chartId, chartRef,unit }) => {
  // const [series,setSeries]=useState<Array<string>>([])

  useEffect(() => {
    echartsInstance = echarts.init(document.getElementById(chartId))
  }, [])

  useEffect(() => {
    const series = []
    data.forEach((item, index) => {
      if (item.data?.length > 0) {
        if (index === 0) {
          item.data.forEach((i) => {
            series.push(i.title)
          })
        }
      }
    })

    // setSeries(sys)

    if (echartsInstance) setOptions(series)
  }, [data])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance
    }
  }))

  const setOptions = (series) => {
    echartsInstance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          shadowStyle:{
            color:'#F5F7FA'
          },
          z:-1
        },
        textStyle:{
          color:"#617185",
          fontSize:12,
        },
        formatter: function (params) {
          return [params[1], params[2]]
            .map((tar) => tar.marker + tar.seriesName + ' : ' + tar.value)
            .join('<br/>')
        }
      },
      grid: {
        left: 20,
        right: 20,
        top:16,
        bottom: 36,
        containLabel: true
      },
      legend: {
        show: true,
        bottom: 0,
        formatter: function (name) {
          if (name !== 'Placeholder') {
            return name
          }
        },
        textStyle:{
          color:"#8B98A9",
          fontSize:12,
        },
        itemGap: 20,
        itemWidth: 10,
        itemHeight: 10,
        icon: 'roundRect'
      },
      padding: 10,
      color: BarGradientColor2,
      xAxis: {
        type: 'category',
        splitLine: { show: false },
        axisTick: {
          show: false
        },
        // offset:-20,
        axisLine: {
          show: false
        },
        axisLabel:{
          color:'#8B98A9'
        },
        data: data.map((item) => item.title)
      },
      yAxis: [
        {
          type: 'value',
          name: '',
          alignTicks: true,
          max: 100,
          min: 0,
          axisLabel: {
            color:'#8B98A9',
            formatter: function (value, index) {
              return value + unit
            }
          },
          offset:20,
          splitLine: {
            show: false
            // lineStyle: {
            //   width: 0.5,
            //   color: '#ECEEF1'
            // }
          }
        },
        {
          type: 'value',
          name: '',
          alignTicks: true,
          min: 0,
          max: 100,
          offset:20,
          axisLabel: {
            color:'#8B98A9',
            formatter: function (value, index) {
              return value + unit
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type:'dashed',
              dashOffset: 5,
              width: 1,
              color: '#ECEEF1'
            }
          }
        }
      ],
      series: [
        {
          name: 'Placeholder',
          type: 'bar',
          stack: 'Total',
          barWidth: '50%',
          barGap: '10%',
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            }
          },
          yAxisIndex: 0,
          data: data.map((item) => item.placeholder)
        },
        {
          name: `${series[0]}`,
          type: 'bar',
          stack: 'Total',
          itemStyle: {
            width: 48
          },
          emphasis: {
            disabled:true, // 禁用高亮
          },
          yAxisIndex: 1,
          data: data.map((item) => item.data[0].value)
        },
        {
          name: series[1],
          type: 'bar',
          stack: 'Total',
          emphasis: {
            disabled:true,
          },
          yAxisIndex: 1,
          data: data.map((item) => item.data[1].value)
        }
      ]
    })
  }

  return (
    <div className="charts-water-fall">
      <div className="chart" id={chartId || 'charts-water-fall-chart'} />
    </div>
  )
}
export default (WaterFallChart)
